{%- stylesheet -%}
.block_offer li{
  background-color: var(--bg-color);
  color: var(--detail-color);
}
.block_offer .offer_container {
  padding: 0 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.block_offer .swiper {
  overflow: hidden;
}
.block_offer .swiper-wrapper {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0;
}
@media (min-width: 768px) {
  .block_offer .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }
}
.block_offer .swiper-slide {
  padding: 20px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .block_offer .swiper-slide {
    padding: 28px;
  }
}
.block_offer .slide_content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
  .block_offer .slide_content {
    flex-direction: row;
  }
}
.block_offer .text_title {
  color: var(--title-color);
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}
.block_offer .text_detail {
  font-size: 14px;
  line-height: 1.6;
}
.block_offer img {
    object-fit: cover;
}

@media screen and (min-width: 768px) {
    .block_offer img {
        max-width: 110px;
        max-height: 110px;
    }
}

@media screen and (max-width: 767px) {
    .block_offer img {
        max-width: 70px;
        max-height: 70px;
    }
}

.block_offer .swiper-slide {
    border-radius: var(--button_border_radius);
    border: 1px solid #e1e3e4;
    background-color: var(--bg-color);
    height: auto;
}

.block_offer .swiper-slide .text_box .public_title {
    font-size: calc(var(--general_font_size) + 3px);
    color: var(--title-color);
}

@media screen and (max-width: 767px) {
    .block_offer .swiper-slide .text_box .public_title {
        font-size: calc(var(--general_font_size) + 2px) !important;
    }
}

.block_offer .swiper-slide .text_box .text_detail {
    color: var(--detail-color);
}
{%- endstylesheet -%}
{% assign data = section.settings %}
{% assign blockId = block_id | default: section.block_id %}

<div class="block_offer" style="--bg-color: {{ data.bg_color }}; --title-color: {{ data.title_color }}; --detail-color: {{ data.detail_color }};">
  <div class="container_wrapper">
    <div class="swiper" id="swiper-{{blockId}}">
      <ul class="swiper-wrapper">
        {% for block in section.blocks %}
          <li class="swiper-slide">
            <div class="slide_content">
              <div class="img_box">
                {% include 'lazy_img', src: block.image.src, alt: block.image.alt %}
              </div>
              <div class="text_box">
                {% if block.title != '' %}
                  <h2 class="text_title public_title" >{{ block.title }}</h2>
                {% endif %}
                {% if block.detail != '' %}
                  <div class="text_detail">{{ block.detail | html_content_filter }}</div>
                {% endif %}
              </div>
            </div>
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</div>

<script>
$(function() {
  if($(window).width() < 768) {
    let swiper = new Swiper('#swiper-{{blockId}}', {
      slidesPerView: 1.4,
      spaceBetween: 20
    });
  }
});
</script>



{% schema %}
{
  "class": "block_offer",
  "is_global": false,
  "icon": "icon-shangpinpingpu1",
  "name": {
    "zh_CN": "特价展示",
    "en_US": "Special offer display"
  },
  "max_blocks": 10,
  "blocks": [
    {
      "name": {
        "zh_CN": "特价展示",
        "en_US": "Special offer display"
      },
      "type": "item",
      "settings": [
        {
          "type": "card_image",
          "label": {
            "zh_CN": "图片",
            "en_US": "Image"
          },
          "default": {
            "src": "",
            "alt": ""
          },
          "info": {
            "zh_CN": "建议宽度1000px以上，高度自适应",
            "en_US": "Recommended width more than 1000px, height adaptive"
          },
          "id": "image"
        },
        {
          "type": "card_input",
          "label": {
            "zh_CN": "标题",
            "en_US": "Title"
          },
          "id": "title",
          "default": "Your text"
        },
        {
          "type": "card_text_editor",
          "label": {
            "zh_CN": "简短描述",
            "en_US": "Short description"
          },
          "id": "detail",
          "default": "Write a few words about your offers or your shop."
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置",
        "en_US": "Settings"
      }
    },
    {
      "type": "card_color",
      "label": {
        "zh_CN": "背景颜色",
        "en_US": "Background color"
      },
      "id": "bg_color",
      "default": "#ffffff"
    },
    {
      "type": "card_color",
      "label": {
        "zh_CN": "标题颜色",
        "en_US": "Title color"
      },
      "id": "title_color",
      "default": "#1e2d7d"
    },
    {
      "type": "card_color",
      "label": {
        "zh_CN": "描述颜色",
        "en_US": "Describe color"
      },
      "id": "detail_color",
      "default": "#677279"
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "内容",
        "en_US": "content"
      }
    }
  ],
  "default": {
    "settings": {
      "bg_color": "#ffffff",
      "title_color": "#1e2d7d",
      "detail_color": "#677279"
    },
    "blocks": [
      {
        "image": {
          "src": "",
          "alt": ""
        },
        "title": "Your text",
        "detail": "Write a few words about your offers or your shop.",
        "block_type": "item"
      },
      {
        "image": {
          "src": "",
          "alt": ""
        },
        "title": "Your text",
        "detail": "Write a few words about your offers or your shop.",
        "block_type": "item"
      }
    ]
  }
}
{% endschema %}
